<template>
  <!-- 专栏 -->
  <div class="center-wrap" id="bili_read">
    <div class="space-between">
      <div class="special-left">
        <StoreyTitle :title='title'>
          <svg slot="svg" t="1595218818980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3585" width="200" height="200">
            <path d="M778.496 142.08h-537.6a56.832 56.832 0 0 0-60.16 54.016v630.528a56.832 56.832 0 0 0 59.136 54.016h537.6a56.832 56.832 0 0 0 59.136-54.016V196.096a56.832 56.832 0 0 0-59.136-54.016z"
              fill="#54E2E2" p-id="3586"></path>
            <path d="M298.496 679.168h421.376a25.6 25.6 0 0 0 0-52.736H298.496a25.6 25.6 0 1 0 0 52.736z m421.376 53.76H298.496a25.6 25.6 0 1 0 0 52.736h421.376a25.6 25.6 0 0 0 0-52.736zM352.256 237.056h314.112q80.128 0 80.128 80.128v154.368q0 80.128-80.128 80.128H352.256q-80.128 0-80.128-80.128V317.184q0-80.128 80.128-80.128z"
              fill="#23ADE5" p-id="3587"></path>
            <path d="M355.584 361.472a49.408 49.408 0 1 0 98.816 0 49.408 49.408 0 1 0-98.816 0zM375.552 551.936l120.832-144.384a44.544 44.544 0 0 1 68.352 0l120.832 144.384z"
              fill="#2EC3E5" p-id="3588"></path>
          </svg>
        </StoreyTitle>
        <div class="zont-list">
          <div class="zont-list-item" v-for="(item,index) in initdata" :key="index">
            <img class="zont-item-img" :src="item.img" alt="">
            <div class="zont-item-info">
              <p class="zont-item-title" :title="item.text">{{item.text}}</p>
              <p class="zont-item-name"><i class="iconfont icon-UPzhu"></i>{{item.name}}</p>
              <p class="zont-item-count">
                <span><i class="iconfont icon-guankanliang"></i>{{item.watch}}</span>
                <span><i class="iconfont icon-pinglun"></i>{{item.comment}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <RankList :ranklist="ranklist" :type="type"></RankList>
    </div>
  </div>
</template>

<script>
  import StoreyTitle from '../public/StoreyTitle.vue'
  import RankList from '../public/RankList.vue'
  export default {
    name: 'SpecialColumnList',
    components: {
      StoreyTitle,
      RankList
    },
    data() {
      return {
        title: '专栏',
        type: true,
        initdata: [{
            img: require('../../assets/img/red_img1.jpg'),
            text: '专访《大理寺日志》导演槐佳佳：做自己喜欢的事，爽！',
            name: '一个人的世界',
            watch: '2146',
            comment: '1'
          },
          {
            img: require('../../assets/img/red_img1.jpg'),
            text: '专访《大理寺日志》导演槐佳佳：做自己喜欢的事，爽！',
            name: '一个人的世界',
            watch: '2146',
            comment: '1'
          },
          {
            img: require('../../assets/img/red_img1.jpg'),
            text: '专访《大理寺日志》导演槐佳佳：做自己喜欢的事，爽！',
            name: '一个人的世界',
            watch: '2146',
            comment: '1'
          },
          {
            img: require('../../assets/img/red_img1.jpg'),
            text: '专访《大理寺日志》导演槐佳佳：做自己喜欢的事，爽！',
            name: '一个人的世界',
            watch: '2146',
            comment: '1'
          },
          {
            img: require('../../assets/img/red_img1.jpg'),
            text: '专访《大理寺日志》导演槐佳佳：做自己喜欢的事，爽！',
            name: '一个人的世界',
            watch: '2146',
            comment: '1'
          },
          {
            img: require('../../assets/img/red_img1.jpg'),
            text: '专访《大理寺日志》导演槐佳佳：做自己喜欢的事，爽！',
            name: '一个人的世界',
            watch: '2146',
            comment: '1'
          },
          {
            img: require('../../assets/img/red_img1.jpg'),
            text: '专访《大理寺日志》导演槐佳佳：做自己喜欢的事，爽！',
            name: '一个人的世界',
            watch: '2146',
            comment: '1'
          },
        ],
        ranklist: [{
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '这样骂够吗？(200w粉纪念)',
            intro: '193.6万',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '忍 者 的 时 代 结 束 了',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '全家被蚊子咬后，就开始疯狂想吃鲜血《迷雾岛·下》',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '刘备：诸葛村夫你是准备三气刘备了吗？',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '【进击的巨人】女王怀孕真正的目的是什么？地鸣灭世只是艾伦计划的开始！？巨人牛b！【他她漫漫聊】',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '七月最奇葩新番，史上最强男人？这我表示非常喜欢',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '铃兰不来我岛的原因',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '「京都动画」因为遇见了你，我的人生才充满色彩！',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '【明日方舟动画】啪嗒啪嗒注意啦！',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
          {
            img: require('../../assets/img/rank_nzm.jpg'),
            title: '扳机社早期驯服jojo原作珍贵影像资料',
            playnum: '95.6',
            comment: '1.0万',
            store: '6.2万',
            coin: '10.3万',
            name: '一个人的世界',
            time: '2020-07-16'
          },
        ]
      }
    }
  }
</script>

<style scoped>
  .zont-list {
    width: 854px;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 404px;
  }

  .zont-list-item {
    width: 400px;
    display: flex;
    height: 90px;
  }

  .zont-item-img {
    height: 90px;
    width: 120px;
    margin-right: 16px;
    border-radius: 2px;
    display: block;
    cursor: pointer;
  }

  .zont-item-title {
    font-size: 14px;
    margin: 0 0 8px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
    color: #212121;
    cursor: pointer;
    transition: color .3s;
  }

  .zont-item-title:hover {
    color: #00A1D6;
  }

  .zont-item-name {
    color: #999;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    cursor: pointer;
    transition: color .3s;
  }
  .zont-item-name:hover{
    color:#00A1D6;
  }

  .zont-item-name>i {
    margin-right: 4px;
    vertical-align: middle;
  }

  .zont-item-count {
    display: flex;
    color: #999;
  }

  .zont-item-count>span {
    display: flex;
    width: 80px;
    align-items: center;
  }

  .zont-item-count>span>i {
    margin-right: 4px;
  }
</style>
